<template>
  <div>
    <div class="search">
      <span class="search_span">搜索</span>
      <el-input
        v-model="input"
        placeholder="请输入内容"
        class="search_input"
      ></el-input>
      <el-button
        icon="el-icon-search"
        class="search_btn"
        circle
        @click="search()"
      ></el-button>
    </div>
  <div  v-if="fenye">
    <div v-for="count in this.number" v-bind:key="count">
      <div class="md_box">
        <a class="md_title" @click="toBlog(blogInfo1[count - 1].blogId)"
          ><h1 style="font-size: 25px">
            {{ blogInfo1[count - 1].blogTitle }}
          </h1></a
        >
        <a class="md_note" @click="toBlog(blogInfo1[count - 1].blogId,blogInfo1[count - 1].userName)">{{ blogInfo1[count - 1].bolgNote }}</a>

        <div class="md_like">
          <a @click="toBlogger(blogInfo1[count - 1].userName)">
            <img
              :src=blogInfo1[count-1].userHead
              class="user_img"
            />
            <span>{{ blogInfo1[count - 1].userName }}</span>
          </a>
          <span>
            <span class="page_veiw" style="margin-left: 6px">浏览量：</span>
            <span>{{ blogInfo1[count - 1].pageView }}</span>
          </span>
          <span>
            <span class="blog_like" style="margin-left: 6px">点赞量：</span>
            <span>{{ blogInfo1[count - 1].blogLike }}</span>
          </span>
          <span>
            <span class="blog_collect" style="margin-left: 6px">收藏量：</span>
            <span>{{ blogInfo1[count - 1].blogCollect }}</span>
          </span>
          <span>
            <span class="sort" style="margin-left: 6px">分类：</span>
            <span>{{ blogInfo1[count - 1].blogSortName }}</span>
          </span>
        </div>

        <div>
          <div class="md_time">
            <span class="create_time">发布时间：</span>
            <span>{{ blogInfo1[count - 1].createTime }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
    <div class="block" style="text-align: center;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage2"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="sizes, prev, pager, next"
        :total="title"
        v-if="fenye"
      >
      </el-pagination>
  <div  v-if="!fenye">
    <div v-for="count in blogInfo2.length" v-bind:key="count">
      <div class="md_box">
        <a class="md_title" @click="toBlog(blogInfo2[count - 1].blogId)"
          ><h1 style="font-size: 25px">
            {{ blogInfo2[count - 1].blogTitle }}
          </h1></a
        >
        <a class="md_note" @click="toBlog(blogInfo2[count - 1].blogId,blogInfo2[count - 1].userName)">{{ blogInfo2[count - 1].bolgNote }}</a>

        <div class="md_like">
          <a @click="toBlogger(blogInfo2[count - 1].userName)">
            <img
              :src=blogInfo2[count-1].userHead
              class="user_img"
            />
            <span>{{ blogInfo2[count - 1].userName }}</span>
          </a>
          <span>
            <span class="page_veiw" style="margin-left: 6px">浏览量：</span>
            <span>{{ blogInfo2[count - 1].pageView }}</span>
          </span>
          <span>
            <span class="blog_like" style="margin-left: 6px">点赞量：</span>
            <span>{{ blogInfo2[count - 1].blogLike }}</span>
          </span>
          <span>
            <span class="blog_collect" style="margin-left: 6px">收藏量：</span>
            <span>{{ blogInfo1[count - 1].blogCollect }}</span>
          </span>
          <span>
            <span class="sort" style="margin-left: 6px">分类：</span>
            <span>{{ blogInfo2[count - 1].blogSortName }}</span>
          </span>
        </div>

        <div>
          <div class="md_time">
            <span class="create_time">发布时间：</span>
            <span>{{ blogInfo2[count - 1].createTime }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      title: 100,       //一共有多少条数据
      page: 1,          //现在是第多少页
      pageSize: 5,      //用来控制一页本来要显示多少个card组件
      number: 0,        //用来控制循环的，要循环多少次，出来多少个卡片组件就靠这个参数控制
      blogInfo1: [],       //用来接收blog的参数的
      blogInfo2: [],
      currentPage2: 1, //这个参数是用来设置开始访问是那一页
      centerDialogVisible: false,
      input:"",
      fenye:true,
    };
  },

  created: function () {
    this.initialize();
    this.getblog_num();
  },

  methods: {
    /**
     * 当前是多少条，并且改变pagesize大小
     * @param {*} val
     */
    handleSizeChange(val) {
      this.pageSize = val;
    },
    /**
     * 当前是第几页，并且把当前的页数和组件size传给后端，后端返回的参数用bloginfo数组来保存，都是数组是可以用push方法才可以放进去，所以说我们需要把之前的数组全部都remove掉
     * @param {*} val
     */
    handleCurrentChange(val) {
      this.page = val;
      axios
        .post("/BlogTfno", {
          page: this.page,
          pageSize: this.pageSize,
        })
        .then((response) => {
          this.blogInfo1.splice(0, this.blogInfo1.length);
          for (let i = 0; i < response.data.length; i++) {
            this.blogInfo1.push(response.data[i]);
          }
          this.number = response.data.length;
        });
    },
    /**
     * 初始化第一页的数据
     */
    initialize() {
      axios
        .post("/BlogTfno", {
          page: this.page,
          pageSize: this.pageSize,
        })
        .then((response) => {
          for (let i = 0; i < response.data.length; i++) {
            this.blogInfo1.push(response.data[i]);
          }
          this.number = response.data.length;
        });
    },
    /**
     * 获取数据库里面一共有多少数据，用title来存储数据量
     */
    getblog_num() {
      axios.post("/rt_blognum", {}).then((response) => {
        this.title = response.data;
      });
    },
    search(){
        axios.post("/search", {input:this.input}).then((response)=>{
          this.blogInfo2.splice(0, this.blogInfo2.length);
          for (let i = 0; i < response.data.length; i++) {
            this.blogInfo2.push(response.data[i]);
          }
          this.fenye=false
          const h = this.$createElement;

        this.$notify({
          message: h('i', { style: 'color: green'}, '搜索成功~')
        });
        })
    },
    /**
     * 跳转到blog显示界面并且携带博客的id号用来查找博客的内容等信息
     * @param {*} blogId 
     */
    toBlog(blogId,userName){
    axios.post("/addPageView",{blogId:blogId-0})
    this.$router.push({name:'BlogView',query:{blogId:blogId,userName:userName}})
  },
    toBlogger(userName){
      this.$router.push({name:'Blogger',query:{userName:userName}})
    },
  },
};
</script>

<style>
a {
  text-decoration: none;
  color: #000;
}
span {
  font-size: 13.5px;
  font-weight: bold;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.search {
  background-color: #fff;
  height: 42px;
  width: 710px;
  border-radius: 10px;
  margin: 0 auto;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  position: relative;
}
.search .search_span{
  position: absolute;
   left: 50px
}
.search .search_input{
  width: 23%; 
  position: absolute; 
  width: 450px;
  left: 130px;
}
.search .search_btn{
  position: absolute; 
  right: 40px
}
.md_box {
  display: block;
  width: 680px;
  height: 160px;
  margin: 0 auto;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 20px;
  padding: 15px;
  position: relative;
}
.user_img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  transform: translateY(33%);
  margin-right: 6px;
}
.md_title {
  display: block;
  text-align: left;
  width: 100%;
  margin-bottom: 10px;
}
.md_note {
  display: block;
  text-align: left;
  font-size: 13.5px;
}
.md_box .md_like {
  position: absolute;
  text-align: left;
  bottom: 25px;
  width: 100%;
}
.md_box .md_time {
  display: block;
  font-size: 12px;
  position: absolute;
  right: 10px;
  bottom: 0px;
}
</style>